<template>
  <div class="article-page-left">
    <h4 :style="{color: sourceColor}" :title="`source: ${source}`">{{source}}</h4>
  </div>
</template>

<script>
export default {
  name: "ArticlePageLeft",
  props: {
    msg: {
      source: Number
    }
  },
  data() {
    return {
      sourceColor: 'red'
    };
  },
  computed: {
    source() {
      const map = {
        1: 'IEEE', 2: 'ACM', 0: 'Unknown'
      };
      const color = {
        1: 'dodgerblue', 2: 'palevioletred', 0: 'red'
      };
      this.sourceColor = color[this.msg.source];
      const ans = map[this.msg.source];
      return ans;
    }
  },
  created() {

  },
  mounted() {

  },
  watch: {

  },
  methods: {

  },
  components: {

  },
};
</script>

<style scoped lang="scss">
.article-page-left {
  position: fixed;
  display: flex;
  flex-direction: column;
  border: 1px solid gray; 
  padding: 3px 5px;
  border-radius: 10px; 
  h4 {
    flex-direction: column;
    color: deepskyblue;
    font-size: 30px;
  }
}
</style>
